<template>
  <div class="left-chart-3">
    <div class="lc3-header">环保废气</div>
    <div class="table-name">
      <img src="./img/i1.png" /><span>331.80</span>
      <img src="./img/i2.png" /><span>201.21</span>
      <img src="./img/i3.png" /><span>13.81</span>
      <img src="./img/i4.png" /><span>8.84</span>
    </div>
    <div class="table-con">
      <table>
        <tr>
          <td class="t-name">SO<span>2</span></td>
          <td>
            <div class="t-con">
              <div class="arc" style="background-color: green"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: orangered"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: yellow"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: deepskyblue"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: snow"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="t-name">NO<span>2</span></td>
          <td>
            <div class="t-con">
              <div class="arc" style="background-color: green"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: orangered"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: yellow"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: deepskyblue"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: snow"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="t-name">O<span>2</span></td>
          <td>
            <div class="t-con">
              <div class="arc" style="background-color: green"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: orangered"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: yellow"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: deepskyblue"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: snow"></div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="t-name">硫化物</td>
          <td>
            <div class="t-con">
              <div class="arc" style="background-color: green"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: orangered"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: yellow"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: deepskyblue"></div>
            </div>
            <div class="t-con">
              <div class="arc" style="background-color: snow"></div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftChart3',
  data () {
    return {

    }
  }
}
</script>

<style lang="less">

  .left-chart-3 {
    width: 100%;
    height: 33%;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 720px;
    .lc3-header {
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      text-indent: 20px;
      margin-bottom: 15px;
    }
  }

  .table-name {
    margin-bottom: 5px;
    span{
      font-size: 14px;
      margin-right: 10px;
      position: relative;
      top: -10px;
    }
    img {
      width: 35px;
      height: 35px;
      margin-right: 5px;
    }
  }

  .table-con {
    table {
      margin-left: 10px;
    }
    td{
      font-size: 14px;
      line-height: 22px;
    }
    span {
      font-size: 10px;
    }
    .t-name {
      width: 80px;
    }
    .t-con {
      width: 20px;
      height: 20px;
      margin: 0 10px 0 10px;
      display: inline-block;
    }
    .arc {
      margin: auto;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      animation: cw 2s infinite linear;

    }
    @keyframes rt {
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes cw {
      0% {
        width: 10px;
        height: 10px;
      }
      75% {
        width: 20px;
        height: 20px;
      }
      100% {
        width: 10px;
        height: 10px;
      }
    }
  }





</style>
